<template>
  <el-container>
    <!-- <el-header></el-header> -->
    <el-row class="el-card-row outter-wrapper">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>指导学生获奖</span>
        </div>
        <div class="text item">
          <!-- form表单 -->
          <el-form ref="form" :model="form" :rules="rules" label-width="100px">
            <el-row>
              <el-col :span="12">
                <el-form-item label="上报人：">
                  <el-input
                    v-model="form.email"
                    disabled
                    placeholder="XXX@xx.com"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="成果类型：">
                  <el-select
                    v-model="form.type"
                    placeholder="请选择成果类型"
                    disabled
                  >
                    <el-option label="学生指导" value="stuAward"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="学生姓名：" prop="stuname">
              <el-input v-model="form.stuname" placeholder="获奖学生姓名,请以分号作为分隔符"></el-input>
            </el-form-item>
            <el-row>
              <el-col :span="12">
                <el-form-item label="项目名称：" prop="itemname">
                  <el-input v-model="form.itemname" placeholder="请输入完整项目名称"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="奖项名称：" prop="awardname">
                  <el-input v-model="form.awardname" required="true" placeholder="请输入完整奖项名称"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="奖项级别：" prop="awardlevel">
                  <el-input v-model="form.awardlevel" placeholder="请输入奖项级别"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="获奖时间：" prop="date">
                  <el-date-picker
                    v-model="form.date"
                    type="date"
                    placeholder="选择获奖日期,请精确到日"
                    format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-form-item label="颁奖单位：" prop="unit">
                <el-input v-model="form.unit" placeholder="请输入颁奖单位,多个请以分号分隔"></el-input>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="实证文件：" prop="file">
                <el-upload
                  class="upload-demo"
                  :file-list="form.filelist"
                  :show-file-list="true"
                  drag
                  action="http://www.baidu.com"
                  :before-upload="beforeUpload"
                  :on-change="addFile"
                  :on-success="uploadSuccess"
                  :multiple="false"
                  :auto-upload="false"
                  accept=".zip"
                  :limit="1"
                >
                  <i class="el-icon-upload"></i>
                  <div class="el-upload__text">
                    将文件拖到此处，或<em>点击上传</em>
                  </div>
                  <div class="el-upload__tip" slot="tip">
                    只能上传单个zip压缩文件,重复上传会导致文件覆盖
                  </div>
                </el-upload>
              </el-form-item>
            </el-row>

            <el-row>
              <el-form-item>
                <el-button type="success" @click="onSubmit('form')">立即上报</el-button>
                <p class="upload-tip-info">退出后将不再保存此次填写的信息.</p>
              </el-form-item>
            </el-row>
          </el-form>
        </div>
      </el-card>
    </el-row></el-container
  >
</template>

<script>
import * as UploadService from '@/service/upload/uploadService'
import * as IndexService from '@/service/index/indexService'
export default {
  name: 'safeCenter',
  data() {
    return {
      form: {
        email: '', //上报人-指导教师
        type: '', //奖项类型
        stuname: '', //学生姓名
        itemname: '', //项目名称
        awardname: '', //奖项名称
        awardlevel: '', //奖项级别
        date: '', //获奖时间
        unit: '', //颁奖单位
        evidence: '', //实证材料文件名[仅支持单文件上传]
        file: '', //文件
      },
      //验证规则
      rules:{
        stuname:[
          {required:true,message:"请输入获奖学生姓名",trigger:"blur"},
        ],
        itemname:[{required:true,message:"请输入项目名称",trigger:"blur"}],
        awardname:[{required:true,message:"请输入奖项名称",trigger:"blur"}],
        awardlevel:[{required:true,message:"请输入奖项级别",trigger:"blur"}],
        date:[{required:true,message:"请输入获奖时间",trigger:"blur"}],
        unit:[{required:true,message:"请输入颁奖单位",trigger:"blur"}],
        file:[{required:true,message:"请选择实证文件",trigger:"blur"}]
      }
    }
  },
  mounted() {
    //获取当前用户邮箱
    let email = localStorage.getItem('email')
    this.form.email = email ? email : 'XXX@xx.com'
    //设置成果类型
    this.form.type = '学生指导'
  },
  methods: {
    //文件上传之前文件类型检验
    beforeUpload(file) {
      //console.log(file)
    },
    //添加文件-添加文件、上传成功和上传失败时都会被调用
    addFile(file, fileList) {
      //记录文件对象
      this.form.file = file
      //console.log(this.form.file)
    },
    //文件上传成功
    uploadSuccess(response, file, fileList) {
      // console.log(response)
      // console.log(file)
      // console.log(fileList)
    },
    //提交信息
    onSubmit(forName) {
      // console.log('submit!')
      // console.log(this.form)
      //验证表单数据
      this.$refs[forName].validate((valid)=>{
        if(valid){
          //需要上传文件
          if (this.form.file) {
            //创建FormData对象
            let formData = new FormData()
            //将文件放入formData对象中
            formData.append('file', this.form.file.raw)
            formData.append('username', this.form.email)
            //console.log(this.form.file.raw)
            //上传文件
            UploadService.uploadFile(formData)
                .then((res) => {
                  //console.log(res)
                  if (res.data && res.data.status) {
                    //文件已上传成功
                    this.$message({
                      message: '文件已上传！',
                      type: 'success',
                    })
                    //获取文件存储路径
                    this.form.evidence = res.data.url
                    //console.log(this.form)
                    let stuWardRecord = {
                      email: this.form.email,
                      stuname: this.form.stuname,
                      itemname: this.form.itemname,
                      awardname: this.form.awardname,
                      awardlevel: this.form.awardlevel,
                      date: this.form.date,
                      unit: this.form.unit,
                      evidence: this.form.evidence,
                    }
                    //开始上报学生获奖信息
                    IndexService.uploadStuAwardInfo(stuWardRecord)
                        .then((res) => {
                          if (res.data == 1) {
                            //成功
                            this.$message({
                              message: '信息上报成功！',
                              type: 'success',
                            })
                          } else {
                            //失败
                            this.$message.error('信息上报失败！')
                          }
                        })
                        .catch((error) => {
                          //失败
                          //console.log(error)
                          this.$message.error('信息上报失败！')
                        })
                  } else {
                    this.$message.error('信息上报失败！')
                  }
                })
                .catch((error) => {
                  //console.log(error)
                  this.$message.error('信息上报失败！')
                  //尝试删除已上传的文件
                  if(this.form.evidence){
                    //文件删除请求
                    UploadService.deleteFile(this.form.email,this.form.evidence).then((res)=>{
                      //判断是否删除成功
                      if (res.data==1){
                        this.$message({
                          message: '已删除无效文件!',
                          type: 'success',
                        })
                      }
                    })
                  }
                })
          } else {
            //直接上报学生获奖信息
            //console.log('直接上报学生获奖信息')
            let stuWardRecord = {
              email: this.form.email,
              stuname: this.form.stuname,
              itemname: this.form.itemname,
              awardname: this.form.awardname,
              awardlevel: this.form.awardlevel,
              date: this.form.date,
              unit: this.form.unit,
              // evidence:this.form.evidence
            }
            //console.log(stuWardRecord)
            IndexService.uploadStuAwardInfo(stuWardRecord).then((res) => {
                  if (res.data == 1) {
                    //成功
                    this.$message({
                      message: '信息上报成功！',
                      type: 'success',
                    })
                  } else {
                    //失败
                    this.$message.error('信息上报失败！')
                  }
                })
                .catch((error) => {
                  //失败
                  //console.log(error)
                  this.$message.error('信息上报失败！')
                })
          }
        }else{
          this.$message.error('请检查并修改输入信息！')
          return false
        }
      })
    },
  },
}
</script>
<style scoped>
.outter-wrapper{
  padding-top: 50px;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}
.clearfix:after {
  clear: both;
}

.el-card-row {
  margin: 0 auto;
  width: 55%;
}

.box-card {
  /* width: 480px; */
}
.el-card__header span {
  color: #409eff;
  font-weight: 700;
}
.box-card:hover {
  /* width: 480px; */
  box-shadow: 0 5px 15px 0 rgb(0 0 0 / 30%);
}
.el-button-sendcode {
  background-color: #17a2b8;
}

.el-select,
.el-date-editor {
  /* width: 346.5px; */
  width: 100%;
}
.upload-tip-info {
  color: #ccc;
}
</style>
